* {
    margin: 0;
    padding: 0;
    list-style: none;
}



@function rem ($px) {
    @return $px/75px*1rem
}

body {
    display: flex;
    height: 100vh;
    flex-direction: column;
}

.head {
    background-color: aqua;
    width: 100vw;
    height: rem(44px);

    img {
        width: 100%;
    }
}

header {
    width: 100vw;
    height: rem(88px);
    background-color: #F2F2F2;
    display: flex;

    .close {
        height: rem(88px);
        font-size: rem(60px);
        font-weight: normal;
        line-height: rem(80px);
        width: rem(88px);
        text-align: right;
        margin-right: rem(20px);
    }

    .font {
        font-size: rem(30px);
        line-height: rem(88px);
    }
}





main {
    width: 100vw;
    flex: 1;
    height: rem(4123px);
    overflow: auto;
    background-color: #ffffff;

    .main——head {
        width: 100vw;
        height: rem(662px);
        background-image: url(../../images/大师介绍页-切图标注/backgroud@2x.png);
        background-repeat: no-repeat;
        background-size: 100vw;
        display: flex;
        align-items: center;
        flex-direction: column;
        border-bottom: rem(20px) solid #F2F2F2;
        background-size: 100% 50%;

        .tou {
            width: rem(160px);
            height: rem(160px);
            border-radius: 50%;
            overflow: hidden;
            border: rem(8px) solid rgba(255, 255, 255, 0.53);
            margin-top: rem(80px);
            z-index: 1;
            box-shadow: 0px rem(5px) rem(30px) rem(2px) rgb(174, 174, 174);
        }
    }

    .main——body {
        width: rem(710px);
        height: rem(400px);
        background-color: #FFFFFF;
        border-radius: 20px;
        overflow: hidden;
        margin-top: rem(-80px);
        box-shadow: 0px rem(5px) rem(220px) rem(5px) rgba(216, 215, 215, 0.37);

        .name {
            width: 100%;
            text-align: center;
            font-size: rem(30px);
            margin-top: 125px;
            font-weight: 600;
        }

        .name::after {
            content: "殿堂";
            background-color: #FF6F6D;
            border-radius: rem(10px);
            width: rem(64px);
            height: rem(32px);
            line-height: rem(32px);
            font-size: rem(20px);
            display: inline-block;
            vertical-align: bottom;
            color: #F2F2F2;
            margin-left: rem(12px);
            font-weight: 600;
        }

        .cont3 {
            display: flex;
            width: 100vw;
            justify-content: center;
            margin-top: rem(34px);

            >div {
                font-size: rem(26px);
                color: #333333;

                img {
                    margin-right: rem(10px);
                }
            }

            .cen {
                margin: 0 rem(70px);
            }
        }

        .cont32 {
            display: flex;
            justify-content: space-around;
            margin-top: rem(50px);
            text-align: center;

            .l1 {
                font-size: rem(22px);
                color: #333333;
            }

            .l2 {
                font-size: rem(24px);
                color: #333333;
                margin-top: rem(30px);
                font-weight: 600;
            }
        }
    }

    .box2 {
        border-bottom: rem(20px) solid #F2F2F2;
    }

    .main_foot {
        width: 100vw;
        height: rem(90px);
        font-size: rem(26px);
        color: #333333;
        display: flex;
        align-items: center;

        >div {
            height: rem(26px);
            border-left: rem(4px) solid #4D6DF3;
            margin-left: rem(20px);
            line-height: rem(26px);
            padding: rem(8px);

            >span {
                color: rgba(128, 128, 128, 0.562);
                display: inline-block;
                margin: 0 rem(40px);
            }
        }
    }

    .linethrough {
        background-color: rgba(128, 128, 128, 0.374);
        width: rem(730px);
        height: rem(1px);
        float: right;
    }

    .line2 {
        width: 100vw;
        height: rem(90px);
        font-size: rem(26px);
        color: #333333;
        display: flex;
        align-items: center;
        line-height: rem(90px);

        >span {
            color: rgba(128, 128, 128, 0.562);
            display: inline-block;
            margin: 0 rem(40px);
            color: #0527AF;
            border: rem(2px) solid #0527AF;
            display: inline-block;
            width: rem(60px);
            height: rem(38px);
            line-height: rem(38px);
            text-align: center;
            border-radius: rem(5px);
        }

    }
}

main {
    >.box3 {
        border-bottom: rem(20px) solid #F2F2F2;

        >.contennt {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            >img {
                margin-bottom: rem(30px);
                width: rem(710px);
            }

            .text {
                width: rem(710px);
                margin-bottom: rem(30px);
                font-size: rem(24px);
                color: #333333;
                line-height: rem(36px);
            }
        }
    }
}

.box4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: rem(20px) solid #F2F2F2;
    height: rem(560px);

    .content {
        display: flex;
        width: rem(710px);

        >.left {
            width: rem(110px);

            >img {
                margin-left: rem(44px);
                margin-right: rem(30px);
                display: block;
                width: rem(60px);
                height: rem(350px);
                margin-top: rem(54px);
            }
        }

        >.right {
            flex: 1;
            margin-left: rem(30px);
            margin-top: rem(54px);

            >div {
                height: rem(100px);
                display: flex;
                flex-direction: column;
                justify-content: start;

                :nth-child(1) {
                    color: #333333;
                    font-size: 22px;

                }

                :nth-child(2) {
                    color: #666666;
                    font-size: 20px;
                    line-height: rem(50px);
                }
            }
        }
    }
}

.box5 {
    border-bottom: rem(20px) solid #F2F2F2;
}

.main_foot1 {
    width: 100vw;
    height: rem(90px);
    font-size: rem(26px);
    color: #333333;
    display: flex;
    align-items: center;

    >div {
        height: rem(26px);
        margin-left: rem(20px);
        line-height: rem(26px);
        padding: rem(8px);
    }
}

.box6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: rem(20px) solid #F2F2F2;

    .bottom {
        width: rem(710px);
        margin-bottom: rem(45px);

        >.line1 {
            font-size: 20px;
            color: #333333;
            margin-top: rem(36px);
            text-indent: rem(12px);

            >span {
                color: #666666;
                text-indent: rem(12px);
                display: inline-block;
            }
        }

        >.line2 {
            text-indent: rem(12px);
            font-size: 22px;
            color: #333333;
            width: 100%;
        }

        >.line3 {
            text-indent: rem(12px);
            display: flex;
            justify-content: space-around;

            >img {
                width: rem(170px);
                height: rem(45px);
            }
        }
    }
}

.box7 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    >.linethrough {
        margin-bottom: rem(32px);
    }

    .lixiansheng {
        display: flex;

        .left {
            img {
                margin-left: rem(30px);
                margin-right: rem(20px);
                width: rem(56px);
                height: rem(56px);
            }
        }

        .right {
            .top {
                color: #333333;
                font-size: rem(30px);
                height: rem(50px);
                display: flex;
                width: rem(600px);
                justify-content: space-between;

                span {
                    color: #999999;
                    font-size: rem(20px);
                    display: inline-block;
                    margin: 0 0 0 rem(6px);
                }
            }

            .time {
                color: #999999;
                font-size: rem(20px);
                height: rem(52px);
            }

            .text {
                width: rem(620px);
                color: #333333;
                font-size: rem(24px);
                line-height: rem(36px);
                margin-bottom: rem(6px);
                box-sizing: border-box;
                padding: 0 rem(10px);

                .huifu {
                    width: rem(613px);
                    height: rem(162px);
                    border-radius: rem(20px);
                    display: flex;
                    box-sizing: border-box;
                    padding-top: rem(55px);
                    background-color: #F8F8F8;

                    img {
                        margin-left: rem(11px);
                        margin-right: rem(20px);
                        width: rem(56px);
                        height: rem(56px);
                    }
                }

                .rig {
                    margin-top: rem(-7px);

                    :nth-child(1) {
                        color: #333333;
                        font-size: rem(30px);
                    }

                    :nth-child(2) {
                        >span {
                            color: rgba(128, 128, 128, 0.562);
                            display: inline-block;
                            color: #0527AF;
                            margin-right: rem(10px);
                            border: rem(2px) solid #0527AF;
                            display: inline-block;
                            width: rem(60px);
                            height: rem(26px);
                            line-height: rem(26px);
                            text-align: center;
                            border-radius: rem(5px);
                            font-size: rem(18px);
                        }
                    }
                }
            }
        }
    }
}

footer {
    display: flex;
    width: 100vw;

    .d1 {
        width: rem(130px);
        height: rem(108px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;

        img {
            display: inline-block;
            width: rem(38px);
            height: rem(38px);
        }
    }

    .shu {
        background-color: rgba(128, 128, 128, 0.484);
        width: rem(2px);
        height: rem(108px);
    }

    .d2 {
        width: rem(130px);
        height: rem(108px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;

        img {
            display: inline-block;
            width: rem(38px);
            height: rem(38px);
        }
    }

    .d3 {
        height: rem(108px);
        text-align: center;
        font-size: rem(30px);
        color: #FFFFFF;
        width: rem(488px);
        background-color: #0527AF;
        line-height: rem(108px);
    }
}